<template>
	<view>
		<view class="sunui-countdown">
			<view v-if="showDay">
				<text class="num">{{ countTime.day }}</text>
				<text class="cn">{{ format ? format : showColon ? ':' : '天' }}</text>
			</view>
			<view v-if="showHour">
				<text class="num">{{ countTime.hour }}</text>
				<text class="cn">{{ format ? format : showColon ? ':' : ':' }}</text>
			</view>
			<view v-if="showMin">
				<text class="num">{{ countTime.min }}</text>
				<text class="cn">{{ format ? format : showColon ? ':' : ':' }}</text>
			</view>
			<view v-if="showSec">
				<text class="num">{{ countTime.sec }}</text>
				<text class="cn">{{ format ? '' : showColon ? '' :'' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import CountDown from './countdown.js';
export default {
	data() {
		return {
			countTime: ''
		};
	},
	name: 'sunui-countdown',
	props: {
		showColon: {
			type: Boolean,
			default: false
		},
		showDay: {
			type: Boolean,
			default: true
		},
		showHour: {
			type: Boolean,
			default: true
		},
		showMin: {
			type: Boolean,
			default: true
		},
		showSec: {
			type: Boolean,
			default: true
		},
		format: {
			type: null,
			default: ''
		},
		timeid: {
			type: [Number, String],
			default: 0
		},
		time: {
			type: null,
			default: 0
		}
	},
	created() {
		new CountDown(this.time)
			.run(t => {
				this.countTime = t;
			})
			.end(() => {
				this.$emit('end', {
					id: this.timeid
				});
			});
	}
};
</script>

<style>
.sunui-countdown {
	display: flex;
	align-items: center;
}
</style>
